<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item><div class="div1">首页</div></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/personalinfo' }"
          ><div class="div2">个人信息</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 内容 -->
    <div class="content">
      <p class="header">个人信息</p>
      <div class="form">
        <el-form ref="form" size="mini" :model="form" label-width="100px">
          <el-form-item label="昵称">
            <el-input :disabled="true" v-model="form.reallyName"></el-input>
          </el-form-item>
          <el-form-item label="工作手机号">
            <el-input :disabled="true" v-model="form.workPhone"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input :disabled="true" v-model="form.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="工号">
            <el-input :disabled="true" v-model="form.serial"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input :disabled="true" v-model="form.sexLabel"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-input :disabled="true" v-model="form.orgName"></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-input :disabled="true" v-model="form.positionName"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-input :disabled="true" v-model="form.roleName"></el-input>
          </el-form-item>
          <el-form-item label="旧五域账号">
            <el-input :disabled="true" v-model="form.oldAccount"></el-input>
          </el-form-item>
          <el-form-item label="在职状态">
            <el-input
              :disabled="true"
              v-model="form.statusLabel"
              :class="[
                statusColor == 'A'
                  ? 'greenStatus'
                  : '' || statusColor == 'X'
                  ? 'redStatus'
                  : '' || statusColor == 'S'
                  ? 'grayStatus'
                  : '',
              ]"
            ></el-input>

            <el-form-item></el-form-item>
            <div class="sumbit">
              <!-- <div @click="addStaff">保存</div> -->
              <div @click="toforget" style="cursor: pointer">修改密码</div>
            </div>
          </el-form-item>
        </el-form>
        <!-- <div class="upload">
          <p class="float-left">头像</p>
          <el-upload
            :disabled="true"
            class="float-left avatar-uploader"
            list-type="picture"
            action="#"
            :show-file-list="false"
            :http-request="imgImport"
          >
            <img v-if="imageUrl" :src="Img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: "",
        chineseName: "",
        staff: "", //销售权限
        staff_position: [], //所属部门
        phone: "",
        address: "",
        password: "",
        dataPermission: "", //数据权限
        position: "", //职位ID
        perosalaType: "",
      },
      options: [],
      judge: "",
      list: [],
      props: {
        label: "orgName",
        value: "id",
        children: "children",
      },
      selectType: [],
      datalist: [],
      userType: [],
      content: "",
      imageUrl: "",
      Img: "",
      statusColor: "",
    };
  },
  created () {
    this.staffDetail();
    this.department();
    this.salesScope();
    this.handleChange();
  },
  methods: {
    // 获取员工详情
    staffDetail () {
      this.axios
        .get(
          "/sys/v2/user/employee/detail?id=" + sessionStorage.getItem("user_id") + "&winType=" + 1)
        .then((res) => {
          // console.log("用户信息详情")
          console.log(res, "详情");
          if (res.code == 0) {


            // this.Img = this.ImgHttps + res.data.avatarUrl;
            // if (!this.is_null(this.Img)) {
            //   this.imageUrl = res.data.avatarUrl;
            // }

            this.form.reallyName = res.data.reallyName
            this.form.workPhone = res.data.workPhone
            this.form.phoneNumber = res.data.phoneNumber
            this.form.serial = res.data.serial
            this.form.sexLabel = res.data.sexLabel
            this.form.orgName = res.data.orgName
            this.form.positionName = res.data.positionName

            this.form.roleName = res.data.roleName.toString()
            this.form.oldAccount = res.data.oldAccount
            this.form.statusLabel = res.data.statusLabel
            this.statusColor = res.data.status
          } else {
            this.$message.error(res.message);
          }
        });
    },
    toforget () {
      this.$router.push({ name: "fixpassword" });
    },
    // 图片上传
    imgImport (fileObj) {
      let formData = new FormData();
      formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      this.axios
        .post(
          "/sys/v1/common/upload/files?pathName=internalSystem",
          formData,
          config
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.imageUrl = res.data.url;
            this.Img = this.ImgHttps + res.data.url;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 部门选择列表
    department () {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          //   console.log(res);
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    salesScope () {
      // 销售权限
      this.axios
        .get("/sys/v1/common/by/group?groupId=sales_authority", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.list = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      // 数据权限
      this.axios
        .get("/sys/v1/common/by/group?groupId=data_permission", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log("数据权限");
          // console.log(res);
          if (res.code == 0) {
            this.datalist = res.data;
          } else {
            this.$message.error(res.message);
          }
        });

      // 用户类型
      this.axios
        .get("/sys/v1/common/by/group?groupId=user_category", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          console.log("用户类型");
          console.log(res);
          if (res.code == 0) {
            this.userType = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleChange () {
      this.axios
        .get("/sys/v1/position/list/select", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log("职位类型")
          // console.log(res)
          if (res.code == 0) {
            this.selectType = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    is_null (content) {
      if (
        content + "" != "" &&
        content + "" != "undefined" &&
        content + "" != "null" &&
        content + "" != "请选择"
      ) {
        return false;
      } else {
        return true;
      }
    },
    addStaff () {
      this.axios
        .post("/sys/v1/user/employee/update", {
          request: {
            avatarUrl: this.imageUrl,
            contactAddress: this.form.address,
            menuButtonList: [0],
            dataPermission: this.form.dataPermission,
            employeeId: sessionStorage.getItem("user_id"),
            orgCode: this.form.staff_position,
            password: this.form.password,
            phoneNumber: this.form.phone,
            positionCode: this.form.position,
            reallyName: this.form.chineseName,
            salesAuthorityId: this.form.staff, //销售权限ID
            userId: sessionStorage.getItem("user_id"),
            username: this.form.name,
            userCategory: this.form.perosalaType,
          },
          version: "",
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.$message.success("修改成功");
            this.$router.push({ path: "/home" });
            // let info = sessionStorage.getItem('personInfo');
            // let sess={
            // 		parentOrgName:info.parentOrgName,
            // 		orgName:info.orgName,
            // 		reallyName:this.form.chineseName,
            // 		positionName:info.positionName,
            // 		img:this.imageUrl
            // 	}
            // sessionStorage.setItem('personInfo',JSON.stringify(sess))
          } else {
            this.$message.error(res.message);
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  background: #fff;
  // margin-top:10px;
  padding: 10px;
  .header {
    font-size: 16px;
    color: #2d7edf;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }
  .form {
    margin-top: 40px;
    padding-left: 80px;

    /deep/.el-input__inner {
      width: 400px;
      height: 30px;
      background: #fff;
      color: #333;
    }
    .staff {
      .el-form-item {
        display: inline-block;
        margin-right: 20px;
      }
    }
    /deep/ .address .el-input__inner {
      width: 580px;
    }
  }
}

.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.upload {
  p {
    font-size: 14px;
    color: #333;
    margin-left: 10px;
    margin-right: 15px;
  }
}
.avatar-uploader .el-upload {
  border: 1px solid #000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #8c939d;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.sumbit {
  clear: both;
  margin: 0px 0px 0px;
  div {
    font-size: 14px;
    width: 78px;
    text-align: center;
    color: #fff;
    height: 30px;
    line-height: 30px;
    background: rgba(45, 126, 223, 1);
    display: inline-block;
    vertical-align: middle;
    margin-right: 30px;
  }
}
.greenStatus {
  /deep/.el-input__inner {
    color: #67c23a !important;
  }
}
.redStatus {
  /deep/.el-input__inner {
    color: #ff0000 !important;
  }
}
.grayStatus {
  /deep/.el-input__inner {
    color: #666666 !important;
  }
}
</style>
